<template>
  <div class="header-top bg_fff flexbetween">
    <div class="flex aligncenter">
      <div class="f-14 fw-6 mr-10">{{title}}</div>
      <GiveExample v-if="showexample" content="https://s.yezgea02.com/common/0LgeFN.png" />
      <div v-if="showenterprise" class="ml-20 enterprise flex aligncenter">
        <img src="@/assets/images/divider.png" alt="" class="mr-20">
        <el-select v-model="enterprise" filterable size="mini">
          <el-option v-for="item in enterpriseList" :key="item.value" :label="item.label" :value="item.value" size="small">
            <div class="select-option-item flexbetween commhover">
              <span>{{ item.label }}</span>
              <i class="el-icon-circle-close icon-close" v-if="enterprise !== item.value"></i>
            </div>
          </el-option>
          <div class="other-option">
            <a class="link">企业管理</a>
          </div>
        </el-select>
      </div>
    </div>
    <div v-if="!isSingle" class="flex aligncenter">
      <el-checkbox v-model="checked" class="mr-8">
        <span class="c_text">首次自动应用</span>
      </el-checkbox>
      <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
        <div slot="content">
          开启后，首次登录本账号的企微号，<br />登录成功5分钟后会自动应用列表中的<br />所有配置。
        </div>
        <svg-icon icon-class="iquestion" class-name="ml-10 c_text" />
      </el-tooltip>
      <el-button
        size="small"
        type="warning"
        class="ml-10"
        @click="handleApplicate"
        >批量应用</el-button
      >
    </div>
    <div v-if="isSingle&&type==2" class="flex aligncenter">
      <el-button size="small" class="bg_fff">复制口令</el-button>
    </div>
  </div>
</template>
<script>
import GiveExample from "@/components/GiveExample";
export default {
  data() {
    return {
      checked: false,
      enterprise:'',
      enterpriseList:[
        { value: 0, label: '志新'}, 
        { value: 1, label: '锐行'}
      ]
    };
  },
  props:{
    title:{
      type:String,
      default:'--'
    },
    showexample:{
      type: Boolean,
      default:true,//是否显示示例，默认为true
    },
    showenterprise:{
      type: Boolean,
      default:false,//是否显示公司下拉框，默认为false
    },
    type:{ //类型
      type:Number,
      default:1,// 1入群欢迎语 2关键词拉群 3 标签拉群 4 自动踢人
    },
    isSingle:{ //是否是单号
      type:Boolean,
      default:false
    }
  },
  components: {
    GiveExample,
  },
  created(){
    if(this.type == 1){
      this.content = 'https://s.yezgea02.com/common/YqM6mU.png'
    }
    if(this.type == 2){
      this.content = 'https://s.yezgea02.com/common/0LgeFN.png'
    }
  },
  methods: {
    handleApplicate() {
      this.$emit("handleApplicate");
    },
  },
};
</script>
<style lang="scss" scoped>
.header-top {
  height: 46px;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 8;
  padding: 0 20px;
}
.enterprise{
  img{
    width: 1px;
    height: 16px;
  }
}
.el-select{
  ::v-deep .el-input__inner{
    background-color: #eff3ff!important;
    border-color: #eff3ff;
  }
}
.other-option {
  padding: 0 8px;
  color: #2f54eb;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e9e9e9;
}
.select-option-item{
  i{display: none;}
  &:hover i{
    display: inline-block;
  }
}
</style>
